<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120">
        
        <FormItem label="选择年级组" prop="grades_id">
            <Select v-model="form.grades_id" @on-change="cascaderChange" placeholder="请选择年级组">
                <Option v-for="(item,index) in positions" :value="item.id" :key="index">{{ item.department_name.zh?item.department_name.zh:item.department_name.mn }}</Option>
            </Select>
        </FormItem>
        
        <FormItem label="选择老师" prop="user_id">
            <Select v-model="form.user_id" multiple placeholder="请选择老师">
                <Option v-for="(item,index) in user" :value="item.id" :key="index">{{ item.name.zh }}</Option>
            </Select>
        </FormItem>
        <FormItem label="选择值班时间" prop="time">
            <DatePicker type="datetime" placeholder="请选择时间" v-model="form.time" style="width:200px"></DatePicker>
        </FormItem>
        <FormItem>
            <Button type="primary" :loading="promptBox" @click="handleSubmit('form')">{{butTitle}}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props:['dataId','sid'],
    data () {
        return {
            form:{
                grades_id: null,
                user_id: [],
                time: '',
            },
            positions: [],
            promptBox:false,
            butTitle:null,
            addUrl:'api/watchlist/v1/watchlistteacher/add',
            editUrl:'api/watchlist/v1/watchlistteacher/edit/' + this.sid,
            selUrl:'api/watchlist/v1/watchlistteacher/find?watchlistteacher_id=' + this.dataId + '&code=' + this.sid,
            periodUrl:'api/watchlist/v1/get/departmentstest/test',
            
            userUrl:'api/user/v1/get/department/users?department_id=',
            user:Array,
            ruleValidate: {
                grades_id: [
                    { required: true, type: 'number', message: '请选择年级组', trigger: 'change' }
                ],
                user_id: [
                    { required: true, type: 'array', message: '请选择老师', trigger: 'change' }
                ],
                time: [
                    { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                ],
            },
        }
    },
    methods: {

        // ==================================================
        // 表单验证
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },

        // ==================================================
        // 执行添加
        // ==================================================
        submit () {
            this.promptBox = true;
            if(this.sid !=null){
                this.$http.put(this.editUrl,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                 }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }else{
                this.$http.post(this.addUrl,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }
        },

        // ==================================================
        // 通过年级组获取用户
        // ==================================================
        cascaderChange(item){
            this.$http.get(this.userUrl + item).then(val => {
                this.user = JSON.parse(JSON.stringify(val.data))
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },

        // ==================================================
        // 查询学段
        // ==================================================
        periodData(){
            this.$http.get(this.periodUrl).then(val => {
                this.positions = JSON.parse(JSON.stringify(val.data))
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        selDate(){
            this.$http.get(this.selUrl).then(val=>{
                let singleData = JSON.parse(JSON.stringify(val.data))
                this.form.grades_id = parseInt(singleData.grades_id)
                this.form.time = singleData.time
                singleData.user_id.forEach(item => {
                    this.form.user_id.push(parseInt(item.user_id))
                })
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
    },
    mounted(){
        this.periodData()
        if(this.sid !=null){
            this.selDate()
            this.butTitle = '修改'
        }else{
            this.butTitle = '添加'
        }
    },
}
</script>